<template>
    <div class="w_h_100">
        <div class="inlet">系统管理 > 权限管理 > 角色管理 > <span class="size">查看角色</span></div>
        <div class="box">
            <div class="d_f j_c_s_b">
                <div class="d_f a_i_c">
                    <div>查看角色</div>
                    <span class="status">角色状态</span>
                    <el-switch v-model="model.status" inline-prompt active-text="开" inactive-text="关" :active-value="0"
                        size="large" :inactive-value="1" style="--el-switch-on-color:#13ce66;margin-left: 12px; " />
                    <span class="tips">若不勾选，则状态默认为下线</span>
                </div>
                <div>
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="edit" v-hasPerm="'editRole'" >编辑</el-button>
                </div>
            </div>
            <div class="d_f a_i_c">
                <myform :fields="addFields" ref="ruleFrom" :model="model" :inline="true" :rules="rules" class="m_t_16">
                </myform>
                <span class="title">通知权限</span>
                <el-checkbox-group v-model="model.roleNoticeIds" class="m_l_20">
                    <el-checkbox v-for="(item, index) in noticeList" :key="index" :label="item.name" :value="item.id" />
                </el-checkbox-group>
            </div>
            <div class="d_f height w_100 j_c_s_b">
                <div class="role d_f f_d_c a_i_c">
                    <div class="d_f a_i_c">
                        <img src="../../../../assets/role_stat.png" alt="">
                        <span class="m_l_15">统计报表</span>
                    </div>
                    <el-tree :props="props" ref="statTree" default-expand-all class="m_t_20" highlight-current
                        :data="statData" node-key="permCode" show-checkbox />
                </div>
                <div class="role d_f f_d_c a_i_c">
                    <div class="d_f a_i_c">
                        <img src="../../../../assets/role_business.png" alt="">
                        <span class="m_l_15">业务管理</span>
                    </div>
                    <el-tree :props="props" ref="businessTree" default-expand-all class="m_t_20" highlight-current
                        :data="businessData" node-key="permCode" show-checkbox />
                </div>
                <div class="role d_f f_d_c a_i_c">
                    <div class="d_f a_i_c">
                        <img src="../../../../assets/role_sys.png" alt="">
                        <span class="m_l_15">系统管理</span>
                    </div>
                    <el-tree :props="props" ref="sysTree" default-expand-all class="m_t_20" highlight-current
                        :data="sysData" node-key="permCode" show-checkbox />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref, nextTick } from 'vue'
import { copy } from '../../../../utils/date'
import { ElMessageBox } from 'element-plus'
import { useRouter, useRoute } from 'vue-router'
import { authorityRoleAddType } from '../../../../type/system'
import { permissionList, roleUpdate, rolGetById } from '../../../../api/system/authority'
import { Message } from '../../../../utils/resetMessage'
import { dictDetail } from '../../../../api/login'
const model = {
    roleName: '',
    roleNoticeIds: [],//通知权限
    srcList: [],//系统管理权限编码列表
    statisticsList: [],//统计报表权限
    businessList: [],//业务管理权限
    status: 0,
    id: 0,
    roleCode:'',
}
export default defineComponent({
    name: '',
    setup() {
        const data: authorityRoleAddType = reactive({
            model: copy(model),
            addFields: [
                {
                    label: '角色名称',
                    type: 'input',
                    placeholder: '请输入角色名称',
                    prop: 'roleName',
                    labelWidth: '80',
                    max:20
                },
            ],
            rules: {
                roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' },],
            },
            props: {
                label: 'name',
                children: 'children',
            },
            sysData: [],
            noticeList: [],
            businessData:[],
            statData:[],
        })
        const router = useRouter()
        const route = useRoute()
        const ruleFrom = ref()
        const statTree = ref()
        const sysTree=ref()
        const businessTree=ref()
        onBeforeMount(() => {
            methods.getRole()
            let id = route.query.id! as string
            data.model.roleCode=route.query.roleCode! as string
            methods.getData(id)
        })
        const methods = {
            //编辑获取数据
            getData(id: string) {
                rolGetById({ id: id }).then((res: any) => {
                    data.model.roleName = res.roleName
                    data.model.status = res.deleted,
                        data.model.id = res.id
                    data.model.srcList = res.menuSrcList
                    data.model.statisticsList = res.statisticsList
                    data.model.businessList = res.businessList
                    data.model.roleNoticeIds = res.noticList
                    setTimeout(() => {
                        nextTick(() => {
                            data.model.srcList.forEach((value: any) => {
                                sysTree.value.setChecked(value, true, false);
                            });
                            data.model.businessList.forEach((value: any) => {
                                businessTree.value.setChecked(value, true, false);
                            });
                            data.model.statisticsList.forEach((value: any) => {
                                statTree.value.setChecked(value, true, false);
                            });
                        })
                    }, 300)

                })
            },
            //关闭当前界面，并清除所有数据
            cancel() {
                ElMessageBox.confirm(
                    '当前信息将不再保存?',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        ruleFrom.value.resetFields()//重置表单
                        data.model = copy(model)
                        router.push('/system/authority/role/index')
                    })
            },
            edit(){
                router.push({path:'/system/authority/role/edit',query:{id:route.query.id as string,roleCode:route.query.roleCode as string}})
            },
            getRole() {
                permissionList({}).then((res: any) => {
                    data.sysData = res.filter((item: any) => {
                        return item.sysLabel.value == 1
                    })
                    data.businessData = res.filter((item: any) => {
                        return item.sysLabel.value == 2
                    })
                    data.statData = res.filter((item: any) => {
                        return item.sysLabel.value == 3
                    })
                })
                dictDetail({ id: 'NOTICE_TYPE' }).then((res: any) => {
                    data.noticeList = res
                })
            }
        }
        return {
            ...toRefs(data),
            ...methods, ruleFrom,
            statTree,businessTree,sysTree
        }
    }
})
</script>
<style scoped lang='scss'>
.box {
    width: calc(100% - 64px);
    height: calc(100% - 100px);
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
    background: #FFFFFF;
    border-radius: 6px;
    margin-top: 12px;
    padding: 30px 32px;

    .status {
        color: rgba(0, 0, 0, 0.9);
        font-size: 14px;
        margin-left: 31px;
    }

    .tips {
        color: rgba(0, 0, 0, 0.4);
        font-size: 11px;
        margin-left: 12px;
    }

    .height {
        height: calc(100% - 120px);
    }

    .role {
        box-shadow: 5px 5px 5px -2px rgba(9, 20, 29, 0.03);
        border-image: linear-gradient(168deg, rgba(155, 188, 235, 0.5) 1%, rgba(102, 142, 197, 0) 94%) 1;
        border: 1px solid #9BBCEB;
        background: linear-gradient(178deg, #F5F9FF 0%, #FFFFFF 62%);
        width: 31%;
        height: calc(100% - 48px);
        border-radius: 6px;
        padding: 24px 0px;
        overflow-y: auto;
    }
}
.title{
    color: rgba(0, 0, 0, 0.4); 
}
</style>
<style lang="scss">
.role {
    .el-tree {
        height: 100%;

    }
}
</style>